<script setup lang="ts">
import { ref,reactive, watch, watchEffect, computed} from 'vue'
interface T{
  name:string
  age:number
}
const input = ref(0)
let obj = reactive<T>({name:'name',age:18})

watch(input,(input1,prevInput)=>{
  console.log('ref',input1,prevInput)
})

watch(()=>obj.age,(newVal,oldVal)=>{
  console.log('reactive',newVal,oldVal)
})

watchEffect(() => {
   let num = Number(obj.age) + Number(input.value)
   console.log('watchEffect',num)
})

const double = computed(() => input.value * 2)


const count = ref(1)
const plusOne = computed({
  get: () => count.value + 1,//只读
  set: (val) => {//可写(可以改变count)
    count.value = val - 1
  }
})

plusOne.value = 5
console.log(count.value,35)
</script>

<template>
  <h1>computedOrwatch</h1>
  <el-input v-model="input" placeholder="ref" />
  <div>{{input}}</div>
  <el-divider />
  <el-input v-model="obj.name" placeholder="reactive" />
  <el-input v-model="obj.age" placeholder="reactive" />
  <div>{{obj}}</div>
  <el-divider />
  <div>{{double}}</div>
  <el-divider />
</template>

<style scoped>

</style>
